<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>扩展参数</title>
</head>
<body>
  <script>
    let values = [1, 2, 3, 4];

    function getSum() {
      let sum = 0;
      for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
      }
      return sum;
    }

    // ES5
    console.log(getSum.apply(null, values));  // 10
    // ES6
    console.log(getSum(...values));  // 10
    // 在扩展操作符前后再加值
    console.log(getSum(-1, ...values));  // 9
    console.log(getSum(...values, 5));  // 15
    console.log(getSum(-1, ...values, 5));  // 14
    console.log(getSum(...values, ...[5, 6, 7]));  // 28
  </script>

  <script>
    // 扩展操作符与参数默认值混合使用
    function getProduct(a, b, c = 1) {
      return a * b * c;
    }

    let getSum1 = (a, b, c = 0) => {
      return a + b + c;
    };

    console.log(getProduct(...[1, 2]));  // 2
    console.log(getProduct(...[1, 2, 3]));  // 6
    console.log(getProduct(...[1, 2, 3, 4]));  // 6

    console.log(getSum1(...[0, 1]));  // 1
    console.log(getSum1(...[0, 1, 2]));  // 3
    console.log(getSum1(...[0, 1, 2, 3]));  // 3
  </script>
</body>
</html>